<template>
    <transition name="fade">
        <div
            v-if="visible"
            class="popup-wrapper"
            @click.self="close"
        >
            <transition name="enter">
                <div
                    v-show="enter"
                    class="popup"
                >
                    <img
                        src="../../assets/images/failure.png"
                        alt=""
                    />
                    <p class="title">确定要撤销授权？</p>
                    <p>撤销授权将可能导致您已办理的业务被数据授权使用方终止</p>
                    <div
                        class="btn"
                        @click="handleOk"
                    >
                        确定
                    </div>
                </div>
            </transition>
        </div>
    </transition>
</template>

<script>
export default {
    name: 'ApplyMsgPop',
    props: {
        loading: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            visible: false,
            enter: false,
        };
    },
    computed: {},
    mounted() {},
    methods: {
        close() {
            this.enter = false;
            setTimeout((_) => (this.visible = false));
        },
        open() {
            this.visible = true;
            setTimeout((_) => (this.enter = true));
        },
        handleOk() {
            this.$emit('on-submit');
        },
    },
};
</script>

<style scoped>
.popup-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9;
}
.popup {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 280px;
    padding-top: 20px;
    border-radius: 10px;
    background-color: #fff;
    transform: translate(-50%, -50%);
    transition: all 0.5s;
}
/* .popup.show {
    top: 50%;
    width: 300px;
} */
.popup img {
    display: block;
    width: 140px;
    margin: 0 auto;
}
.popup p {
    width: 240px;
    font-size: 14px;
    line-height: 22px;
    margin: 0 auto 16px;
    text-align: center;
    color: #ec2b2b;
}

.popup p.title {
    font-size: 18px;
    line-height: 36px;
    margin: 0 auto 8px;
    text-align: center;
    color: #333;
}

.btn {
    border-top: solid thin #efefef;
    font-size: 16px;
    line-height: 50px;
    text-align: center;
    color: #1e6fd9;
}
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
    opacity: 0;
}
.enter-enter-active,
.enter-leave-active {
    transition: all 0.3s;
}
.enter-enter,
.enter-leave-to {
    top: 100%;
    width: 150px;
}
</style>
